import { useState, useEffect } from "react";
import { getCurrentDate } from "./utils/utils";
import "./index.css";
import classNames from "classnames";
function App() {
  const [list, setList] = useState([]);
  const [content, setContent] = useState("");
  const [currentAuthor, setCurrentAuthor] = useState("");
  const [currentTab, setCurrentTab] = useState("time");

  const tabs = [
    {
      value: "time",
      label: "最新",
    },
    {
      value: "hot",
      label: "最热",
    },
  ];

  useEffect(() => {
    setList([
      {
        id: 1,
        author: "张三",
        content: "这是一个很好的文章！",
        time: "2024-08-09 10:30:30",
        like: 10,
      },
      {
        id: 2,
        author: "李四",
        content: "感谢分享，学到了很多知识！",
        time: "2024-08-10 15:30:00",
        like: 5,
      },
      {
        id: 3,
        author: "王五",
        content: "期待作者更多的作品！",
        time: "2024-08-11 09:45:00",
        like: 2,
      },
      {
        id: 4,
        author: "张三",
        content: "这是一个很好的文章！",
        time: "2024-08-09 10:30:30",
        like: 10,
      },
    ]);
  }, []);

  const changeTab = (value) => {
    setCurrentTab(value);
    // 排序
    if (value === "time") {
      list.sort((a, b) => {
        return new Date(b.time) - new Date(a.time);
      });
      setList([...list]);
    } else if (value === "hot") {
      list.sort((a, b) => b.like - a.like);
      setList([...list]);
    }
  };

  const likeComment = (id) => {
    for (let l of list) {
      if (l.id === id) {
        l.like++;
      }
    }
    setList([...list]);
  };

  const deleteComment = (id) => {
    setList(list.filter((item) => item.id !== id));
  };
  const submitComment = () => {
    if (currentAuthor === "") {
      alert("请输入用户名");
      return;
    }
    if (content === "") {
      alert("请输入评论内容");
      return;
    }
    let newComment = {
      id: list.length + 1,
      author: currentAuthor,
      content: content,
      time: getCurrentDate(),
      like: 0,
    };
    setList([...list, newComment]);
  };

  const renderCommentList = () => {
    return (
      <div>
        {list.map((item) => (
          <div key={item.id}>
            <p>
              作者：{item.author}
              <span style={{ marginLeft: "10px" }}>
                {/* 点赞 */}
                <button
                  onClick={() => {
                    likeComment(item.id);
                  }}
                >
                  点赞
                </button>
              </span>
              <span style={{ marginLeft: "10px" }}>
                {currentAuthor === item.author && (
                  <button
                    onClick={() => {
                      deleteComment(item.id);
                    }}
                  >
                    删除
                  </button>
                )}
              </span>
            </p>
            <p>内容：{item.content}</p>
            <p>时间：{item.time}</p>
            <p>点赞数：{item.like}</p>
            <br></br>
          </div>
        ))}
      </div>
    );
  };
  return (
    <div>
      <h1>Comment</h1>
      <p>
        当前用户：
        <input
          type="text"
          value={currentAuthor}
          onChange={(e) => {
            setCurrentAuthor(e.target.value);
          }}
        ></input>
      </p>
      <p>
        {/* 这个 input 与 content 绑定 */}
        <input
          type="text"
          value={content}
          onChange={(e) => {
            setContent(e.target.value);
          }}
        />
        <span style={{ marginLeft: "10px" }}>
          <button onClick={submitComment}>发布</button>
        </span>
      </p>
      <p>
        {tabs.map((item) => {
          return (
            <span
              key={item.value}
              style={{ marginRight: "10px", cursor: "pointer" }}
              className={classNames({
                "tab-active": currentTab === item.value,
              })}
              onClick={() => {
                changeTab(item.value);
              }}
            >
              {item.label}
            </span>
          );
        })}
      </p>
      {renderCommentList()}
    </div>
  );
}

export default App;
